<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="js/validate-methods.js" type="text/javascript"></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>
    <script src="js/messages_zh.js" type="text/javascript"></script>
    <script src="js/additional-methods.js" type="text/javascript"></script>
</head>
<body>
<table>
    <thead>
    <td>ID</td>
    <td>NAME</td>
    <td>PWD</td>
    </thead>
    <tbody id="t1"></tbody>
</table>

<button type="button" id="addUser">添加用户</button>
<div id="d" style="display: none">
    <s:form id="formAdd">
        <s:fielderror/>
        用户名:<s:textfield id="uname" name="uname"/> <br>
        密码:<s:password id="upwd" name="upwd"/><br>
        <s:submit value="添加" onclick="add()"/>
    </s:form>
</div>
</body>
<script>

    $(function () {
        userList();
    });

    function userList() {
        $.ajax({
            url: "UserAction_list",
            type: "POST",
            dataType: "json",
            success: function (data) {
                var str;
                $("#t1").html("");
                $(data).each(function (i, n) {
                    str += "<tr>" +
                        "<td>" + n.uid + "</td>" +
                        "<td>" + n.uname + "</td>" +
                        "<td>" + n.upwd + "</td>" +
                        "<td><button type='button' onclick='del(" + n.uid + ",this)'>删除</button></td>" +
                        "</tr>";
                })
                $("#t1").html(str);
            }
        })
    }

    function del(uid, obj) {
        $.ajax({
            url: "UserAction_del",
            type: "POST",
            data: {uid: uid},
            dataType: "json",
            success: function (data) {
                $(obj).parent().parent().remove();
            }
        })
    }

    function add() {
        $.ajax({
            url: "UserAction_add",
            type: "POST",
            data: {uname: $("#uname").val(), upwd: $("#upwd").val(), rpwd: $("#rpwd").val()},
            dataType: "json",
            success: function (data) {
                userList();
                $("#t1").append(str);
            }
        })
    }

    $("#formAdd").validate({
        rules: {
            uname: {
                required: true,
                minlength: 3,
                maxlength: 18
            },
            upwd: {
                required: true,
                minlength: 6,
                maxlength: 10
            },
            rpwd: {
                required: true,
                equalTo: "#upwd"
            }
        },
        message: {
            uname:{
                required:"请输入用户名",
                minlength:"用户名最短3字符",
                maxlength:"用户名最长18字符"
            },
            upwd:{
                required:"请输入密码",
                minlength:"密码最短6字符",
                maxlength:"密码最长10字符"
            },
            rpwd:{
                required:"请输入重复密码",
                equalTo:"两次密码不一致"
            }
        },
        onkeyup: true,
        focusCleanup: true,
        success: "valid",
    })
    ;

    $("#addUser").click(function () {
        $("#d").toggle();
    })

</script>
</html>
